import { Dropdown } from "antd"
import type { MenuProps } from 'antd';
import { useDispatch } from "react-redux";
import { setTheme } from "@/redux/modules/global";

const Theme = () => {
    const dispatch = useDispatch()

    const onClick: MenuProps['onClick'] = ({ key }) => {
        dispatch(setTheme(key))
    };

    const items: MenuProps['items'] = [
        {
          key: 'default',
          label: <span>浅色</span>,
        },
        {
            key: 'dark',
            label: <span>深色</span>,
        }
      ];

    return (
        <Dropdown menu={{items, onClick }} placement="bottom" arrow={{ pointAtCenter: true }} trigger={['click']}>
            <i className="icon-style iconfont icon-zhuti"></i>
        </Dropdown>
    )
}

export default Theme